<!-- page content -->
<div id="dashboardVue" class="right_col" role="main">
	<!-- top tiles -->
	<div class="row" style="display: inline-block">
		<div class="tile_count">
			<div class="col-md-2 col-sm-4 tile_stats_count">
				<span class="count_top"><i class="fa fa-user"></i> Total Users</span>
				<div class="count">2500</div>
				<span class="count_bottom"><i class="green">4% </i> From last Week</span>
			</div>
			<div class="col-md-2 col-sm-4 tile_stats_count">
				<span class="count_top"><i class="fa fa-clock-o"></i> Average Time</span>
				<div class="count">123.50</div>
				<span class="count_bottom"
				><i class="green"><i class="fa fa-sort-asc"></i>3% </i> From last Week</span
				>
			</div>
			<div class="col-md-2 col-sm-4 tile_stats_count">
				<span class="count_top"><i class="fa fa-user"></i> Total Males</span>
				<div class="count green">2,500</div>
				<span class="count_bottom"
				><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span
				>
			</div>
			<div class="col-md-2 col-sm-4 tile_stats_count">
				<span class="count_top"><i class="fa fa-user"></i> Total Females</span>
				<div class="count">4,567</div>
				<span class="count_bottom"
				><i class="red"><i class="fa fa-sort-desc"></i>12% </i> From last Week</span
				>
			</div>
			<div class="col-md-2 col-sm-4 tile_stats_count">
				<span class="count_top"><i class="fa fa-user"></i> Total Collections</span>
				<div class="count">2,315</div>
				<span class="count_bottom"
				><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span
				>
			</div>
			<div class="col-md-2 col-sm-4 tile_stats_count">
				<span class="count_top"><i class="fa fa-user"></i> Total Connections</span>
				<div class="count">7,325</div>
				<span class="count_bottom"
				><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span
				>
			</div>
		</div>
	</div>
	<!-- /top tiles -->

	<div class="row">
		<div class="col-md-12 col-sm-12">
			<div id="dashboard_line_flot" style="height: 400px"></div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12 col-sm-12">
			<!-- <div id="main" class="dashboard_line" style="width: 600px; height: 400px"></div> -->
			<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
			<div id="dashboard_line" style=" height: 400px"></div>
		</div>
	</div>
	<br />
</div>

<!-- echart -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
<!-- Flot -->
<script src="/vendors/Flot/jquery.flot.js"></script>
<script src="/vendors/Flot/jquery.flot.pie.js"></script>
<script src="/vendors/Flot/jquery.flot.time.js"></script>
<script src="/vendors/Flot/jquery.flot.stack.js"></script>
<script src="/vendors/Flot/jquery.flot.resize.js"></script>
<!-- Flot plugins -->
<script src="/vendors/flot.orderbars.js/jquery.flot.orderBars.js"></script>
<script src="/vendors/flot-spline.js/jquery.flot.spline.min.js"></script>
<script src="/vendors/flot.curvedlines/curvedLines.js"></script>

<script type="text/javascript">
	var dashboardVue = new Vue({
		el: "#dashboardVue",
		data: {
			coronaviruses: [],
		},
		methods: {
			initCoronaviruses: function () {
				var self = this;
				$.ajax({
					url: "/api/coronaviruses",
					type: "get",
					// contentType: "application/json",
					// data: JSON.stringify(searchBean),
					success: function (rs) {
						self.coronaviruses = rs;
						self.initLineEcharts();
						self.initLineFlot();
					},
					error: function (data) {
						layer.alert(data.responseText, { icon: 0 });
					},
				});
			},
			initLineFlot: function () {
				var chart_plot_01_settings = {
					series: {
						lines: {
							show: false,
							fill: true,
						},
						splines: {
							show: true,
							tension: 0.4,
							lineWidth: 1,
							fill: 0.4,
						},
						points: {
							radius: 0,
							show: true,
						},
						shadowSize: 2,
					},
					grid: {
						verticalLines: true,
						hoverable: true,
						clickable: true,
						tickColor: "#d5d5d5",
						borderWidth: 1,
						color: "#fff",
					},
					colors: [
						"rgba(38, 185, 154, 0.38)",
						"rgba(3, 88, 106, 0.38)",
						"rgba(22, 155, 144, 0.28)",
						"rgba(33, 166, 122, 0.14)",
					],
					xaxis: {
						tickColor: "rgba(51, 51, 51, 0.06)",
						mode: "time",
						tickSize: [1, "day"],
						//tickLength: 10,
						axisLabel: "Date",
						axisLabelUseCanvas: true,
						axisLabelFontSizePixels: 12,
						axisLabelFontFamily: "Verdana, Arial",
						axisLabelPadding: 10,
					},
					yaxis: {
						ticks: 8,
						tickColor: "rgba(51, 51, 51, 0.06)",
					},
					tooltip: false,
				};

				var diagnosis = [];
				var overseasImport = [];
				var cure = [];
				var death = [];
				$.each(this.coronaviruses, function (i, item) {
					diagnosis.push([new Date(item.date), item.diagnosis]);
					overseasImport.push([new Date(item.date), item.overseasImport]);
					cure.push([new Date(item.date), item.cure]);
					death.push([new Date(item.date), item.death]);
				});
				console.log(diagnosis);

				var gzbds = [];
				// 画图，将所有图轨加入到 list 中
				gzbds.push({ label: "<div style='color: #0b2e13'>确诊数</div>", data: diagnosis });
				gzbds.push({ label: "<div style='color: #0b2e13'>输入数</div>", data: overseasImport });
				gzbds.push({ label: "<div style='color: #0b2e13'>治愈数</div>", data: cure });
				gzbds.push({ label: "<div style='color: #0b2e13'>死亡数</div>", data: death });

				$.plot($("#dashboard_line_flot"), gzbds, chart_plot_01_settings);
			},
			initLineEcharts: function () {
				var legends = ["确诊数", "输入数", "治愈数", "死亡数"];
				var xAxis = [];
				var diagnosis = [];
				var overseasImport = [];
				var cure = [];
				var death = [];
				$.each(this.coronaviruses, function (i, item) {
					xAxis.push(item.date);
					diagnosis.push(item.diagnosis);
					overseasImport.push(item.overseasImport);
					cure.push(item.cure);
					death.push(item.death);
				});
				console.log(diagnosis);

				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById("dashboard_line"));

				// 指定图表的配置项和数据
				var option = {
					title: {
						text: "冠状病毒",
					},
					tooltip: {},
					legend: {
						data: legends,
					},
					xAxis: {
						data: xAxis,
					},
					yAxis: {},
					series: [
						{
							name: "确诊数",
							type: "line",
							data: diagnosis,
						},
						{
							name: "输入数",
							type: "line",
							data: overseasImport,
						},
						{
							name: "治愈数",
							type: "line",
							data: cure,
						},
						{
							name: "死亡数",
							type: "line",
							data: death,
						},
					],
				};

				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			},
		},
		mounted: function () {
			this.initCoronaviruses();
		},
	});
</script>
